import { Card } from 'antd'
import * as echarts from 'echarts';
import { useEffect, useMemo, useRef } from 'react';
import { useRequest, useMount } from 'ahooks'
import { WithEchartResize } from '../../utils/hooks';

const ChartsItem = (props) => {
  const { getData, createData } = props
  const containerEl = useRef()
  const echartsIns = useRef()
  const { data } = useRequest(getData)
  console.log(data)
  const option = useMemo(() => (data ? createData(data) : null), [data])
  useMount(() => {
    echartsIns.current = echarts.init(containerEl.current);
  })
  useEffect(() => {
    option && echartsIns.current.setOption(option);
  }, [option])
  WithEchartResize(echartsIns.current)
  return (
    <Card ref={containerEl} style={{ width: '100%', height: '100%' }} />
  )
}
export default ChartsItem;
